<template>
  <el-container class="main">
    <el-main>
      <EditorMain>
        <div class="tabs tabs-space-between"
             style="width: 95%;margin: 20px auto 0;padding-bottom:20px;border-bottom: 1px solid #CCCCCC;">
          <div class="tabs">
            <span class="top-tabs-btn"
                  :class="[belong === 5 ? 'top-tabs-btn-active1' : 'top-tabs-btn1']"
                  @click="onChangeBelong(5)"
                  @mouseover="display(1)"
                  @mouseout="disappear(1)"
                  ref="showResTipsBtn" >{{$t('common.mxrRepertory')}}</span>
            <span class="top-tabs-btn"
                  :class="[belong === 3 ? 'top-tabs-btn-active2' : 'top-tabs-btn2']"
                  @click="onChangeBelong(3)"
                  @mouseover="display(2)"
                  @mouseout="disappear(2)">{{$t('common.privRepertory')}}</span>
          </div>
          <div style="display: flex">
            <div class="tabs">
              <input class="search-input"
                     type="text"
                     v-model="keyWord"
                     :placeholder="$t('resource.searchPlaceholder')"
                     title=""
                     @keyup.enter="onSearch"/>
              <span class="search-btn"
                    @click="onSearch">
            {{$t('common.search')}}
              </span>
            </div>
            <div class="search-top"
                 style="margin-left: 20px;margin-top: 3px"
                 @click="showBox"
                 id="mySearch">
              <span style="width: 130px">{{$t('common.advance')}}</span>
              <span class="el-icon-arrow-up"
                    id="top"
                    v-show="showMoreSearch"></span>
              <span class="el-icon-arrow-down"
                    id="down"
                    v-show="!showMoreSearch"></span>
            </div>
          </div>
        </div>
        <div v-show="showQaTips"
             ref="showResTips"
             @mouseover="display()"
             @mouseout="disappear()"
             class="introduction-word">
          {{description}}
        </div>
        <div id="menu"
             v-show="showMoreSearch" style="width: 95%;margin: 0 auto">
          <SearchParam :belong="belong"
                       :language="language"
                       :on-change-parent-type="onChangeType"
                       :on-change-parent-classifies="onChangeClassifies"
                       :on-change-parent-order="onChangeOrder"
                        :on-change-third-parent-classifies="onChangeThirdClassifies"
                        ></SearchParam>
        </div>


        <ResList
          ref="list"
          :belong="belong"
          :support="support"
          :sub="subType"
          :userId="userId"
          :resourceName="resourceName"
          :importRes="importRes"
          :language="language"
          :pid="pid"
          :thirdSub="thirdSub"
          :orderType="orderType"
          :has-res="hasRes"
          :page="page"
          :total="total"
          :on-change-page="onChangePageInfo"
          :on-parent-jump-to-res-shop="onJumpToResShop"/>

        <div v-if="importRes"
             style="width: 95%;height: 1px;background: #CCCCCC;margin: 0 auto"
             id="bottomLine"></div>

        <ImportBtn v-if="importRes"  :import-parent-resources="importResources"/>
      </EditorMain>
    </el-main>
  </el-container>
</template>

<script>
  import EditorMain from '../../components/EditorMain'
  import SelectedRes from '../../components/res-list/SelectedResList'
  import ImportBtn from '../../components/res-list/ImportResButton'
  import ResList from '../../components/res-list/ResList'
  import SearchParam from '../../components/res-list/ResSearchParam'

  import ajax from '../../common/ajax'
  import api from '../../common/api'

  let language
  let context
  let u

  export default {
    name: "SearchResult",
    beforeRouteEnter(to, from, next) {
      next(vm => {
        vm.$store.commit('keepAlive/setKeepAlive', ['SearchResult'])
      })
    },
    data() {
      return {
        belong: 1,
        support: -1,
        subType: -1,
        userId: 13,
        resourceName: '',
        importRes: true,
        language: 'zh-cn',
        pid: -1,
        classifies: [],
        sub: [],
        childSub: [],
        thirdSub: -1,
        orderType: '',
        value: 1,
        index: 1,
        // 资源每页资源数量
        pageSize: 12,
        // 资源第几页
        page: 1,
        // 资源数量
        total: 0,
        // 是否显示资源
        hasRes: false,
        // 显示高级查询
        showMoreSearch: false,
        // 品牌方
        brandName: '',
        showQaTips: false,
        description: ''
      }
    },
    components: {EditorMain, SelectedRes, ResList, ImportBtn, SearchParam},
    created() {
      u=navigator.userAgent
      language = this.$route.query.culture
      this.userId = this.$route.query.userId
      this.language = this.$route.query.culture
      this.belong = parseInt(this.$route.query.belong)
      this.resourceName = this.$route.query.name
      this.importRes = this.$route.query.import.toString() === 'true'
      this.brandName = this.$route.query.brandName || ''

      getResources(1, this)
    },
    mounted() {
      new QWebChannel(qt.webChannelTransport, function(channel) {
        context = channel.objects.JSSendMessage;
      });
    },
    methods: {
      display(i) {
        let btn = this.$refs.showResTipsBtn
        let tips = this.$refs.showResTips
        let top = btn.offsetTop
        let left = btn.offsetLeft

        tips.style.top = (top + 75) + 'px'
        tips.style.left = (left) + 'px'
        this.showQaTips = true
      },

      disappear() {
        this.showQaTips = false
      },
      onJumpToResShop(t){
        if(u.indexOf('Trident') > -1){
          window.external.JSCallMFCFunctionoCustomizedResourceJumpPurchase(t)
        }else if(u.indexOf('AppleWebKit') > -1){
          context.useFunction_Jump(t)
        }
      },

      importResources(m){
        console.log(m)
        if(u.indexOf('Trident') > -1){
          window.external.JSCallMFCFunctionoLoadingResource(m);
        }else if(u.indexOf('AppleWebKit') > -1){
          context.sendResources(m)
        }
      },
      /**
       * 展示高级搜索
       */
      showBox() {
        this.showMoreSearch = !this.showMoreSearch
      },
      /**
       * 改变资源排序方式
       *
       * @param type 排序方式
       */
      onChangeOrder(type) {
        this.orderType = type

        getResources(1, this)
      },
      /**
       * 改变资源来源
       *
       * @param belong 资源来源
       */
      onChangeBelong(belong) {
        this.belong = belong
        this.pid = -1
        this.support = -1
        this.subType = -1
        this.thirdSub = -1

        getResources(1, this)
      },
      /**
       * 改变资源类型
       *
       * @param item 资源对象
       */
      onChangeType(item) {
        this.support = -1
        this.subType = -1

        this.pid = item.id

        getResources(1, this)
      },
      /**
       * 改变资源分类
       *
       * @param item 资源分类对象
       */
      onChangeClassifies(item) {
        this.thirdSub = -1
        this.subType = item.id

        getResources(1, this)
      },

      /**
       * 改变子分类信息
       */
      onChangeThirdClassifies(item){
          this.thirdSub=item.id
          getResources(1,this)
      },
      /**
       * 分页事件
       *
       * @param e 第几页数
       */
      onChangePageInfo(e) {
        getResources(e, this)
      },
      /**
       * 点击搜索
       */
      onSearch() {
        getResources(1, this)
      }
    },
    beforeRouteLeave(to, from, next) {
      if (to.path.indexOf('/home') > -1 || to.path.indexOf('/import-home') > -1) {
        this.$store.commit('keepAlive/setKeepAlive', [])
      }else{
        this.$store.commit('keepAlive/setKeepAlive', ['SearchResult'])
      }
      next()
    }
  }

  /**
   * 根据不同条件进行资源筛选
   * @param page 页数
   * @param that VUE对象
   */
  function getResources(page, that) {
    ajax.get({
      url: api.resource.privateRouteName + api.resource.children.list,
      data: {
        keyWord:that.keyWord,
        page: page,
        pageSize: that.pageSize,
        belong: that.belong,
        userId: that.userId,
      },
      success(res) {
        console.log(res)
        that.hasRes = res.list !== null && res.list.length > 0
        that.$store.commit('resources/initDbResources', {
          resList: res.list || [],
          importRes: that.importRes
        })
        that.total = res.total
        that.page = page
      }
    })
  }
</script>

<style scoped>
  .main {
    min-height: 100%;
    width: 100%;
    background: #EFF3F5;
  }

  .top-tabs {
    width: 95%;
    margin: 0 auto;
    overflow: hidden;
    padding-bottom: 20px;
    border-bottom: 1px solid #CCCCCC;
  }

  .tabs {
    display: flex;
    align-items: center;
  }

  .tabs-space-between {
    justify-content: space-between;
  }

  .top-tabs-label {
    font-size: 28px;
    color: #4381E6;
  }

  .top-tabs-btn {
    width: 150px;
    height: 46px;
    background: #BCBCBC;
    border-radius: 4px;
    font-size: 18px;
    color: #FFFFFF;
    text-align: center;
    line-height: 46px;
    margin-left: 20px;
    cursor: pointer;
  }

  .top-tabs-btn:first-child {
    margin-left: 0;
  }

  .top-tabs-btn-active {
    background: #4381E6;
  }

  .top-tabs-btn1{
    background: url("../../assets/images/btn_resourcestore_nor.png") no-repeat;
    padding-left: 10px;
    padding-top: 2px;
  }
  .top-tabs-btn-active1 {
    background: url("../../assets/images/btn_resourcestore_sel.png") no-repeat;
    padding-left: 10px;
    padding-top: 2px;
  }

  .top-tabs-btn2{
    background: url("../../assets/images/btn_privatelibraries_nor.png") no-repeat;
    padding-left: 10px;
    padding-top: 2px;
  }
  .top-tabs-btn-active2 {
    background: url("../../assets/images/btn_privatelibraries_sel.png") no-repeat;
    padding-left: 10px;
    padding-top: 2px;
  }
  .top-tabs-btn3{
    background: url("../../assets/images/btn_customlibrary_nor.png") no-repeat;
    padding-left: 10px;
    padding-top: 2px;
  }
  .top-tabs-btn-active3 {
    background: url("../../assets/images/btn_customlibrary_sel.png") no-repeat;
    padding-left: 10px;
    padding-top: 2px;
  }

  .search-input {
    height: 25px;
    padding: 10.5px 20px;
    border: 2px solid #CCCCCC;
    border-radius: 4px;
    font-size: 18px;
    color: #999999;
  }

  .search-btn {
    width: 77px;
    height: 43.2px;
    background: #4381E6;
    border-radius: 4px;
    margin-left: 18px;
    color: white;
    text-align: center;
    line-height: 43.2px;
    font-size: 18px;
    cursor: pointer;
  }

  .search-btn img {
    display: block;
    width: 35px;
    margin: 0 auto;
  }

  .search-top {
    width: 100px;
    height: 43px;
    background: #4381E6;
    border-radius: 4px;
    color: white;
    text-align: center;
    line-height: 43px;
    font-size: 16px;
  }

  .search-top:hover {
    cursor: pointer;
  }

  .introduction-word {
    background: #FFFFFF;
    border: 1px solid #979797;
    border-radius: 4px;
    font-size: 16px;
    color: #999999;
    padding: 5px;
    text-align: left;
    line-height: 30px;
    position: absolute;
    z-index: 101;
  }
</style>
